<template>
  <div class="dashboard-container">
    <el-row type="flex">
      <!-- 机构概述 -->
      <el-col :span="12" style="margin-right:100px"><el-card class="box-card">
        <h4 class="title">机构概述</h4>
        <div class="content">
          <div> <p>西三旗分拣中心</p>
            <p class="adress">地址：北京顺义区天澜综合保税区123号</p>
            <p class="people">负责人：赵五金 16712345678</p>
            <el-button type="danger" plain style="width:158px">查看营业部分布</el-button></div>
          <el-divider direction="vertical" />
          <div class="num">
            <div class="count"><p>分拣中心(个)</p><p>55</p></div>
            <div class="count"><p>营业部(个)</p><p>55</p></div>
            <div class="count"><p>司机人数(个)</p><p>55</p></div>
            <div class="count"><p>快递员人数(个)</p><p>55</p></div>
          </div>
        </div>
      </el-card></el-col>
      <!-- 今日数据 -->
      <el-col :span="12"><el-card class="dayData">
        <div class="header">
          <p>今日数据</p>
          <div><i class="el-icon-refresh" style="color:#e15536;padding-right:10px" @click="time = new Date().toLocaleString()" /><span>{{ time }}</span></div>
        </div>
        <div class="content">
          <div class="content_item"><p>订单金额(元)</p>
            <p>2,284</p>
            <p>较昨日 +342 <i class="el-icon-top" /></p>
          </div>
          <div class="content_item"><p>订单数量(笔)</p>
            <p>193</p>
            <p>较昨日 +27 <i class="el-icon-top" /></p>
          </div>
          <div class="content_item"><p>运输任务(次)</p>
            <p>38</p>
            <p>较昨日 +26 <i class="el-icon-top" /></p>
          </div>
        </div>
      </el-card></el-col>
    </el-row>
    <el-row type="flex">
      <!-- 待办任务 -->
      <el-col :span="12" style="margin-right:100px">
        <el-card class="box-card">
          <div class="header">
            <p>待办任务<img class="question" src="" alt=""></p>
            <div><i class="el-icon-refresh" style="color:#e15536;padding-right:10px" @click="time = new Date().toLocaleString()" /><span style="color:#818693">{{ time }} - 2023-10-25 23:59</span></div>
          </div>
          <div class="waterDrop">
            <div id="echartsBox1" class="boxDom" style="width:180px;height:180px" />
            <div id="echartsBox2" class="boxDom" style="width:180px;height:180px" />
            <div id="echartsBox3" class="boxDom" style="width:180px;height:180px" />
            <div id="echartsBox4" class="boxDom" style="width:180px;height:180px" />
            <p class="text">代取件 <span style="color:#e35c3f;font-weight:600">39</span></p>
            <p class="text1">代取件  <span style="color:#fdc462;font-weight:600">18</span></p>
            <p class="text2">代取件  <span style="color:#ffb45d;font-weight:600">4</span></p>
            <p class="text3">代取件  <span style="color:#fef49b;font-weight:600">5</span></p>

          </div>
        </el-card>
      </el-col>
      <!-- 执行中任务 -->
      <el-col :span="12"><el-card class="dayData"> <div class="header">
                                                     <p>执行中任务<img class="question" src="" alt=""></p>
                                                     <div><i class="el-icon-refresh" style="color:#e15536;padding-right:10px" @click="time = new Date().toLocaleString()" /><span style="color:#818693">{{ time }}</span></div>
                                                   </div>
        <div class="waterDrop2">
          <div id="echartsBox5" class="boxDom" style="width:180px;height:180px" />
          <div id="echartsBox6" class="boxDom" style="width:180px;height:180px" />
          <p class="text4">代取件 <span style="color:#f9785c;font-weight:600">53</span></p>
          <p class="text5">代取件 <span style="color:#fdc462;font-weight:600">34</span></p>

        </div>
      </el-card>
      </el-col>
    </el-row>
    <!-- 常用功能 -->
    <el-row>
      <el-col :span="24"><el-card class="box-card" style="width:100%">
        <div class="header">
          <p>常用功能</p>
        </div>
        <div class="context">
          <div class="feature" @click="$router.push('/transport/pick')"><img src="" alt="">
            <span>快递作业</span></div>
          <div class="feature" @click="$router.push('/task')"><img src="" alt=""><span>运输任务</span></div>
          <div class="feature" @click="$router.push('/transport/line')"><img src="" alt=""><span>线路管理</span></div>
          <div class="feature" @click="$router.push('/car/list')"><img src="" alt=""><span>车辆管理</span></div>
          <div class="feature" @click="$router.push('/user/driver')"><img src="https://fe-slwl-manager.itheima.net/static/img/useFeature5.cc8a9bb1.png" alt=""><span>司机管理</span></div>
          <div class="feature" @click="$router.push('/base/transit')"><img src="https://fe-slwl-manager.itheima.net/static/img/useFeature6.67f8db98.png" alt=""><span>运费查询</span></div>
        </div>
      </el-card>
      </el-col>
    </el-row>
    <!-- 线路管理，运输任务 -->
    <el-row class="task" type="flex">
      <el-col :span="12">
        <el-card class="line_management">
          <div style="font-weight:600">
            线路运输
          </div>
          <div id="tramsport" style="width:570px;height:420px" />
        </el-card>
      </el-col>

      <el-col :span="12"> <el-card class="transport_task">
        <div class="head">
          <span>运输任务</span><span>查看更多<i class="el-icon-arrow-right" /></span>
        </div>
        <div class="table">
          <el-table
            ref="tableDom"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="任务编号"
              width="130"
              align="center"
            />
            <el-table-column
              prop="startAgency"
              label="起始地"
              width="130"
              align="center"
            />
            <el-table-column
              prop="endAgency"
              label="目的地"
              width="130"
              align="center"
            />
            <el-table-column
              prop="licensePlate"
              label="车辆"
              width="100"
              align="center"
            />
            <el-table-column
              prop="status"
              label="任务状态"
              align="center"
              :formatter="formatting"
            />
          </el-table>
        </div>
      </el-card>
      </el-col>
    </el-row>
    <!-- 订单总量，订单分布 -->
    <el-row class="task" type="flex">
      <el-col :span="12">
        <el-card class="line_management">
          <div class="head" style="display:flex;justify-content: space-between">
            <div>
              <p style="font-weight:600">订单总量</p>
              <p style="font-size:14px;color:#818693">单位：笔</p>
            </div>
            <p style="font-size:14px;color:#818693">2023-04 - 2023-09</p>
          </div>
          <div class="orderNum" style="display:flex;justify-content: space-evenly;margin-top:10px">
            <div>
              <p style="text-align:center;color:#e15536;font-weight:600;font-size:28px;margin:0;">54</p>
              <p style="font-size:12px;color:#818693">订单最高值</p>
            </div>
            <div>
              <p style="text-align:center;color:#e15536;font-weight:600;font-size:28px;margin:0;">54</p>
              <p style="font-size:12px;color:#818693">订单最底值</p>
            </div>
            <div>
              <p style="text-align:center;color:#e15536;font-weight:600;font-size:28px;margin:0;">54</p>
              <p style="font-size:12px;color:#818693">订单最底值</p>
            </div>
          </div>
          <div id="pointcharts" style="width:540px;height:300px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="transport_task">
          <div style="font-weight:600">
            订单分布
          </div>
          <div id="transport_task" style="width:575px;height:400px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import chinaMap from '@/assets/json/china.json'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import { mapGetters } from 'vuex'
import { workspaceData } from '@/api/workspace'
import { orderDistributeStatic } from '@/utils/echartsData'
export default {
  name: 'Dashboard',
  components: {
    // liquidfill
  },
  data() {
    return {
      time: new Date().toLocaleString().replace(/\//g, '-'),
      tableData: []

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async created() {
    const res = await workspaceData()
    console.log(res)
    this.tableData = res.transportTaskList
  },
  mounted() {
    // 待办任务
    this.getliquid('echartsBox1', { color1: '#ffe5e0', color2: '#e35c3f', data: 42 })
    this.getliquid('echartsBox2', { color1: '#fff1d9', color2: '#ffc45e', data: 31 })
    this.getliquid('echartsBox3', { color1: '#ffead7', color2: '#ff9b41', data: 29 })
    this.getliquid('echartsBox4', { color1: '#fafade', color2: '#fef49b', data: 41 })
    // 执行中任务
    this.getliquid('echartsBox5', { color1: '#ffe5e0', color2: '#e35c3f', data: 42 })
    this.getliquid('echartsBox6', { color1: '#fff1d9', color2: '#ffc45e', data: 32 })
    // 订单分布
    this.getdistribution()
    // 运输线路
    this.getTransport()
    // 订单总量
    this.getorders()
    // 表格滚动
  },
  methods: {
    // 水滴图
    getliquid(Dom, colorObj) {
      const myEchart = echarts.init(document.querySelector(`#${Dom}`))
      const option = {
      // x轴
        xAxis: {
          show: false // 不显示
        },
        // y轴
        yAxis: {
          show: false // 不显示
        },
        grid: {
          top: '2.5%',
          right: '40',
          bottom: '2.5%',
          left: 0
        },
        title: {
          text: colorObj.data + '%',
          textStyle: {
            fontSize: 16,
            // fontFamily: 'Microsoft Yahei',
            fontWeight: 'bold',
            color: 'black',
            rich: {
              a: {
                fontSize: 18
              }
            }
          },
          x: 'center',
          y: 'center'
        },
        graphic: [{
          type: 'group',
          left: 'center',
          top: '60%'
        }],
        series: [{
          type: 'liquidFill',
          radius: '50%',
          center: [
            '50%',
            '50%'
          ],
          data: [0.48, 0.48], // 水球波纹值

          outline: { // 轮廓设置
            show: true,
            borderDistance: 4, // 边框与球中间间距
            itemStyle: {
              borderWidth: 2,
              borderColor: colorObj.color2,
              shadowBlur: 3,
              shadowColor: colorObj.color2
            }
          },
          color: [
            colorObj.color1,
            colorObj.color2
          ],
          backgroundStyle: {
            borderWidth: 0,
            borderColor: colorObj.color2,
            color: colorObj.color1
          },
          label: {
            normal: {
              formatter: ''
            }
          }
        }, {
          type: 'line', // 折线图
          markLine: {
            silent: true, // 不触发鼠标事件
            symbol: '', // 标线两端样式
            lineStyle: { // 标线样式
              color: '#f00',
              type: 'solid'
            }
          }

        }]
      }
      myEchart.setOption(option)
    },
    // 订单分布
    getdistribution() {
      const distribution = echarts.init(document.querySelector('#transport_task'))
      const option = {
        dataset: {
          source: [
            ['amount', 'product'],
            ...this.fommarterorderData().reverse()
          ]
        },

        xAxis: { name: '' },
        yAxis: { type: 'category' },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            }
          }
        ]
      }
      distribution.setOption(option)
    },
    // 线路运输
    getTransport() {
      echarts.registerMap('china', { geoJSON: chinaMap })
      const transpost = echarts.init(document.querySelector('#tramsport'))
      const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
      const points = [
        { value: [116.405285, 39.904989], itemStyle: { color: '#FFFA00' }},
        { value: [113.54909, 22.198951], itemStyle: { color: '#00EEFF' }},
        { value: [91.132212, 29.660361], itemStyle: { color: '#00EEFF' }},
        { value: [126.642464, 45.756967], itemStyle: { color: '#00EEFF' }},
        { value: [87.617733, 43.792818], itemStyle: { color: '#00EEFF' }}
      ]
      const option = {
        geo: {
          map: 'china',
          roam: true, // 是否开启放大缩小/拖拽功能
          zoom: 1.2, // 缩放比列
          layoutCenter: ['45%', '60%'], // 地图中心点位置
          layoutSize: '100%',
          label: {
            show: true,
            color: 'black'
          },
          itemStyle: {
            areaColor: 'orange',
            borderColor: 'yellow',
            borderWidth: 0.5,
            shadowColor: 'rgba(0,54,255, 0.4)',
            shadowBlur: 100
          },
          emphasis: { // 区域激活时的样式
            itemStyle: {
              areaColor: 'yellow'
            },
            label: {
              color: 'black'
            }
          }
        },
        series: [ // 添加迁移线数据
          {
            type: 'lines',
            data: [ // 配置多个点的数据
              {
                coords: [
                  [116.405285, 39.904989],
                  [113.54909, 22.198951]
                ]
              },
              {
                coords: [
                  [116.405285, 39.904989],
                  [91.132212, 29.660361]
                ]
              },
              {
                coords: [
                  [116.405285, 39.904989],
                  [126.642464, 45.756967]
                ]
              },
              {
                coords: [
                  [116.405285, 39.904989],
                  [87.617733, 43.792818]
                ]
              }
            ],
            effect: {
              show: true,
              period: 5, // 箭头指向速度，值越小速度越快
              trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
              // symbol: 'arrow', //箭头图标
              symbol: planePath,
              // 'image://',
              symbolSize: 15 // 图标大小
            },
            lineStyle: {
              color: '#00eaff',
              width: 1, // 尾迹线条宽度
              opacity: 0.7, // 尾迹线条透明度
              curveness: 0.3 // 尾迹线条曲直度
            }
          },
          { // 带有涟漪特效动画的散点（气泡）图
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            zlevel: 1,
            rippleEffect: {
              number: 3, // 波纹的数量。
              period: 5, // 动画的周期，秒数。
              scale: 17, // 动画中波纹的最大缩放比例。
              brushType: 'fill' // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            },
            symbolSize: 2,
            data: points
          }
        ]
      }
      transpost.setOption(option)
    },
    // 格式化表格状态
    formatting(row) {
      if (row.status === 1) {
        return '执行中'
      } else if (row.status === 2) {
        return '进行中'
      } else if (row.status === 3) {
        return '待确认'
      } else if (row.status === 4) {
        return '已完成'
      } else if (row.status === 5) {
        return '已取消'
      }
    },
    // 订单总量
    getorders() {
      // TODO 更换DOM
      const orders = echarts.init(document.querySelector('#pointcharts'))
      const option = {
        title: {
          text: '',
          subtext: '',
          right: 'center',
          top: '1%'
        },
        // legend: {
        //   right: 10,
        //   data: ['1990', '2015']
        // },
        xAxis: {
          data: ['2023-04']
        /* splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }*/
        },
        yAxis: {},
        series: [{
          type: 'scatter',
          name: '1990',
          symbol: 'circle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: function(data) {
            return Math.sqrt(data[2]) * 1
          },
          label: {
            emphasis: {
              show: true,
              formatter: function(param) {
                return param.data[2]
              },
              position: 'top'
            }
          },
          data: [
            ['2023-04', 56, 56]

          ]
        }]
      }
      orders.setOption(option)
    },
    // 处理订单分布数据
    fommarterorderData() {
      return orderDistributeStatic.map(item => {
        return Object.values(item).reverse()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }

}
.waterDrop {
  display: flex;
  position: relative;
  .boxDom {
  position: relative;
  left: 0;
  top: -45px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.text {
  position: absolute;
  left: 50px;
  top: 100px;
}
.text1 {
   position: absolute;
  left: 225px;
  top: 100px;
}
.text2 {
   position: absolute;
  left: 400px;
  top: 100px;
}
.text3 {
   position: absolute;
  left: 575px;
  top: 100px;
}
}
.waterDrop2 {
   display: flex;
  position: relative;
  justify-content: space-evenly;
   .boxDom {
  position: relative;
  left: 0;
  top: -45px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.text4 {
  position: absolute;
  left: 90px;
  top: 100px;
}
.text5 {
  position: absolute;
  left: 303px;
  top: 100px;
}
}
.box-card {
 width: 735px;
  height: 235px;
}
.content {
  display: flex;
}

.adress,.people {
  font-size: 14px;
  color: #818693
}
.title {
  margin: 0;
  padding: 0;
  margin-bottom: 16px;
}
.el-divider {
  height: 150px;
  margin-left: 90px;
  margin-right: 54px;
}
.num {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.count {
  width: 140px;
  height: 60px;
  margin-left: 10px;
  margin-top: 15px;
}
.count p:nth-child(1) {
  margin: 0;
}
.count p:nth-child(2) {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  margin-top: 10px;
  color: #e15536;
}
.dayData {
  width: 500px;
  height: 233px;
  margin-left: 30px;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  p {
    margin: 0;
    font-weight: 550;
  }

}
.el-icon-top {
  color: #e15536;
  font-size: 12px;
  font-weight: 600;
}
.content {
  display: flex;
  justify-content: space-evenly;
  .content_item p:nth-child(2) {
    text-align: center;
    font-size: 36px;
    color: #20232a;
    font-weight: 700;
    margin: 0;
  }
   .content_item p:nth-child(3){
    color: #818693;
   }

}
.el-row {
  margin-bottom: 20px;
}
.context {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 187px;
    height: 116px;
    text-align: center;
    // line-height: 116px;
    background-color: #fafafb;
    img {
      width: 40px;
      height: 40px;
    }
  span {
    margin-top: 20px;
    font-weight: 600;
  }
  }
}
::v-deep .task .el-col {
  width: 640px;
  height: 480px;
}
::v-deep .task .el-card__body {
  height: 480px;
}
.task .el-col:nth-child(1) {
  margin-right: 20px;
}
.question {
  width: 20px;
  height: 20px;
  vertical-align: bottom;
  margin-left: 5px;
}
.transport_task {
  .head {
    display: flex;
    justify-content: space-between;
    span:nth-child(1) {
    font-weight: 600;
  }
    span:nth-child(2) {
      font-size: 14px;
      color: rgb(140, 131, 131);
    }
  }

}
</style>
